<%@page import="java.util.Date"%>
<%@page import="board.BoardVo"%>
<%@page import="java.util.Vector"%>
<%@page import="board.Board"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Inzy's Board</title>
<link rel="stylesheet"
	href="http://fonts.googleapis.com/earlyaccess/nanumgothic.css" />
<style>

#list_input, #board_list_frm input[type=submit] {
	font-size: 14px;
	font-family: 'Nanum Gothic', sans-serif;
	background: #160952;
	color: white;
	border: 4px solid #160952;
	cursor:pointer;
}

#board_list_frm{
	text-align: right;
}

#board_h1{
	font-family: 'Nanum Gothic', sans-serif;
	font-weight: bold;	
	background-color: #ffaeaf;
	width: 250px;
}

#board_pos {
	width: 740px;
	height: 520px;
	padding-top: 50px;
	font-size : 12px;
	background-color: transparent;
	color: white;
}

#board_main {
 	background-size: 100%;
	background-image: url(../images/boardbg-2.png);
	background-color: white;
	width: 100%;
	height: 570px;
}

/* title */
#list_no,#list_subject,#list_id,#list_date,#list_count {
	line-height: 250%; /* 줄 간격 */
	display: table-cell;
	background-color: #160952;
	font-family: 'Nanum Gothic', sans-serif;
	font-size: 14px;
}

#list_no {
	width: 70px;
}

#list_subject {
	width: 300px;
}

#list_id {
	width: 100px;
}

#list_date {
	width: 200px;
}

#list_count {
	width: 70px;
}

#list_line {
	width: 740px;
	height: 1px;
}

/* cell */
.item_no,.item_subject,.item_id,.item_date,.item_count {
	display: table-cell;
	line-height: 200%; /* 줄 간격 */
	font-family: 'Nanum Gothic', sans-serif;
	font-size: 13px;
	color: black;
}

.item_no {
	width: 70px;
}

.item_subject {
	width: 300px;
	text-align: left;
}

.item_id {
	width: 100px;
}

.item_date {
	width: 200px;
}

.item_count {
	width: 70px;
}

.item_total {
	width: 100px;
	height: 20px;
	display: table-cell;
	color: black;
	font-family: 'Nanum Gothic', sans-serif;
	font-size: 13px;
	
}

.item_writeBtn {
	width: 650px;
	height: 20px;
	display: table-cell;
	/* padding-right: 10px; */
	
}

.item_pageNum {
	width: 600px;
	text-align: center;
	font-family: 'Nanum Gothic', sans-serif;
	font-size: 13px;
	
}

.item_pageNum input{
	background-color: transparent;
	color: black;
	border: 0px solid;
	cursor: pointer;
}

.item_subject a:link, .item_subject a:active, .item_subject a:visited{
	color: black;
	text-decoration: none;
}
</style>

<!-- <script>
function getId(id){
	return document.getElementById(id);
};

function goPage(page){
	var ff = document.search_form;
	ff.nowPage.value = page;
	ff.action = "Main.jsp?inc_content=../board2/list.jsp";
	ff.submit();
}
function re(){
	alert("로그인을 해주세요");
};

</script> -->


<!-- ///////////////////////////////////////////////// -->

<script>
var xhr;
var rs;
var test;
function init(){
	rs = document.getElementById("board_item");
	test = document.getElementById("item_no");
	xhr = new XMLHttpRequest();
	
	var btn = document.getElementById("btnSearch");
	xhr.onreadystatechange = boardLoad;
	
	btn.onclick = function(){
		var find = document.getElementById("find").value;
		var url = "../board2/list_json.jsp?find="+find;
		xhr.open('get', url, true);
		xhr.send();
	};
}

function boardLoad(){
	if (xhr.status == 200 && xhr.readyState == 4) {
		var obj = xhr.responseText;
		var s = obj.indexOf("<body>") + 6;
		var e = obj.lastIndexOf("</body>");
		var lastobj = obj.substring(s, e);
		
		//alert(lastobj);
		rs.innerHTML = "";
		test.innerHTML = "";
		eval(lastobj);
		
		for(var i=0;i<jsonArray.length;i++){
			//rs.innerHTML += "<li>MID : " + jsonArray[i].mid;
			
			test.innerHTML += "<li>MID : " + jsonArray[i].mid;
			
			//rs.innerHTML += "<li>Subject : " + jsonArray[i].subject;
			//rs.innerHTML += "<li>Mdate : " + jsonArray[i].mdate;
			//rs.innerHTML += "<li>Hit : " + jsonArray[i].hit;
			//rs.innerHTML += "<hr/>";
		}
		
		if(pageInfo.endPage > 2){
			rs.innerHTML += "<input type='button' value='<<' onclick='goPage(" + (Number(pageInfo.startPage) - 1) + ")'>"; 
		}
		
		for(var j=pageInfo.startPage;j<=pageInfo.endPage;j++){
			rs.innerHTML += "<input type='button' value='" + j + "' onclick='goPage(" + j + ")'>"; 
		}
		
		if(pageInfo.endPage < pageInfo.totPage){
			rs.innerHTML += "<input type='button' value='>>' onclick='goPage(" + (Number(pageInfo.endPage) + 1) + ")'>"; 
		}

		
	}
}

function goPage(page){
	var find = document.getElementById("find").value;
	var url = "../board2/list_json.jsp?find="+find+"&nowPage="+page;
	xhr.open('get', url, true);
	xhr.send();

}

function re(){
	alert("로그인을 해주세요");
}
</script>


</head>

<body>
	<div id='board_main'>
		<div align=center>
			<div id='board_pos'>
			
			<form name='search_form' method='post' action='Main.jsp?inc_content=../board2/list.jsp&nowPage=1'
			style='margin-bottom: 30px;' id="board_list_frm">
				<input type='search' name='find' id='find' placeholder="검색어를 입력하세요."
					value="검색어" style="font-family: 'Nanum Gothic', sans-serif; width: 180px;font-size:14px;"> 
				<input type='button' id='btnSearch' value='검색'>
			</form><p/>
			
			
				<div id='board_list'>
					<div id='list_no'>번호</div>
					<div id='list_subject'>제목</div>
					<div id='list_id'>작성자</div>
					<div id='list_date'>작성일</div>
					<div id='list_count'>조회수</div>

					<div id='list_line'
						style='background-color: #D2D2D2;'></div>
					<div id='list_line' style='background-color: #82B5DF;'></div>
				</div>
				
				<div id='board_item'>
				
					<div id='item_no'></div>
<!-- 					<div class='item_subject'></div>
					<div class='item_id'></div>
					<div class='item_date'></div>
					<div class='item_count'></div> -->

					<div id='list_line'
						style='background-color: #D2D2D2; margin-top: 2px;'></div>

				</div>

				<div id='list_line'
					style='background-color: #82B5DF; margin-bottom: 10px;'></div>

				<div id='item_etc'>
					<div class='item_total'></div>
					<div class='item_writeBtn' align=right>
						<input type=button value="글쓰기" id="list_input">
					</div>
				</div>

				<div class='item_pageNum'></div>

			</div>
		</div>
	</div>
	
	<script>
		init();
	</script>
</body>
</html>